<template>
  <div style="position: fixed;z-index:100">
    <PopUp :popupOption="popupData"></PopUp>
    <div id="select-left-bar">
      <a-row>
        <a-col>
          <div class="cjw-control">
            <button type="button" title="搜索框" @click="toggleSearchSelect">
              <a-icon :type="searchExpandBtnIcon"/>
            </button>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="search-select">
          <transition name="info">
            <div style="margin-top:10px;" v-show="searchSelectShow">
              <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">监控点列表</span>
                </span>
                <a @click="toggleSearchSelect" slot="extra">
                  <a-icon type="close"/>
                </a>
                <a-row style="margin-bottom:10px;">
                  <a-col>
                    <a-table
                      :dataSource="leftTableData"
                      :columns="columns"
                      rowKey="kid"
                      :pagination="pagination"
                      size="middle"
                    >
                      <div
                        slot="filterDropdown"
                        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                        class="custom-filter-dropdown"
                      >
                        <a-input
                          v-ant-ref="c => searchInput = c"
                          :placeholder="`Search ${column.dataIndex}`"
                          :value="selectedKeys[0]"
                          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                          @pressEnter="() => handleSearch(selectedKeys, confirm)"
                          style="width: 172px; margin-bottom: 8px; display: block;"
                        />
                        <a-button
                          type="primary"
                          @click="() => handleSearch(selectedKeys, confirm)"
                          icon="search"
                          size="small"
                          style="width: 80px; margin-right: 8px"
                        >查询</a-button>
                        <a-button
                          @click="() => handleReset(clearFilters)"
                          size="small"
                          style="width: 80px"
                        >重置</a-button>
                      </div>
                      <a-icon
                        slot="filterIcon"
                        slot-scope="filtered"
                        type="search"
                        :style="{ color: filtered ? '#108ee9' : undefined }"
                      />
                      <template slot="customRender" slot-scope="text">
                        <span v-if="searchText">
                          <template
                            v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
                          >
                            <mark
                              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                              :key="i"
                              class="highlight"
                            >{{fragment}}</mark>
                            <template v-else>{{fragment}}</template>
                          </template>
                        </span>
                        <template v-else>{{text}}</template>
                      </template>
                      <template slot="actionRender" slot-scope="text, record">
                        <a-tooltip placement="right">
                          <template slot="title">
                            <span>详情</span>
                          </template>
                          <a @click="monitorPointLocate(record.jcdbh)">
                            <i class="fa fa-location-arrow"></i>
                          </a>
                        </a-tooltip>
                      </template>
                    </a-table>
                  </a-col>
                </a-row>
              </a-card>
            </div>
          </transition>
        </a-col>
      </a-row>
    </div>
    <!-- <transition name="right-slide"> -->
    <!-- <transition name="slide-fade"> -->
    <div
      :style="{ 
        width:'540px', 
        position:'fixed', 
        right:'10px', 
        height: contentHeight+'px', 
        visibility: detailsShow, 
        transition: 'opacity 0.5s',
        opacity: detailsShow == 'hidden' ? 0 : 1 
      }"
    >
      <div class="panel panel-info b-t-4x" style="margin-bottom:5px; margin-top:10px; border:none;">
        <div class="panel-body" style="padding:0;">
          <div id="charts-r1">
            <template>
              <a-card :bordered="false">
                <a-card-grid class="font-bold" style="width:100%;">
                  <h4>{{currentQY ? currentQY.qypwk : '---'}}</h4>
                  <a-row>
                    <a-col :span="17">{{currentQY ? currentQY.qyname : '---'}}</a-col>
                    <a-col :span="7">{{currentQY.jcdate}}</a-col>
                  </a-row>
                </a-card-grid>
                <a-card-grid>
                  <h5>烟尘浓度</h5>
                  <span class="font-bold">
                    <span
                      :style="{color: optionr2.baseOption.color[0], paddingRight:'10px'}"
                    >{{currentQY.ycnd}}</span>mg/m³
                  </span>
                </a-card-grid>
                <a-card-grid>
                  <h5>SO₂浓度</h5>
                  <span class="font-bold">
                    <span
                      :style="{color: optionr2.baseOption.color[1], paddingRight:'10px'}"
                    >{{currentQY.sotwond}}</span>mg/m³
                  </span>
                </a-card-grid>
                <a-card-grid>
                  <h5>NOx浓度</h5>
                  <span class="font-bold">
                    <span
                      :style="{color: optionr2.baseOption.color[2], paddingRight:'10px'}"
                    >{{currentQY.nond}}</span>mg/m³
                  </span>
                </a-card-grid>
              </a-card>
            </template>
          </div>
        </div>
      </div>
      <div class="panel no-border" style="margin-bottom:10px; margin-top:5px;">
        <div class="panel-heading" style="text-align: center; padding: 10px 15px 0;">
          <a-radio-group :defaultValue="r2radioValue" buttonStyle="solid" @change="r2radioChange">
            <a-radio-button value="rmonth">月排放</a-radio-button>
            <a-radio-button value="ryear">年排放</a-radio-button>
          </a-radio-group>
        </div>
        <div class="panel-body">
          <div id="charts-r2" :style="{height:(chartsrHeight)+'px'}"></div>
        </div>
      </div>
    </div>
    <!-- </transition> -->
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
import PopUp from './PopUp';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');

//var _object = require('lodash/fp/object');
export default {
  name: 'R10101',
  computed: {
    ...mapGetters(['map', 'contentHeight'])
  },
  data() {
    function showTotalFn(total) {
      return `总数：${total} `;
    }
    return {
      visablestyle: { display: 'none' },
      //传递到弹窗组件中的数据
      popupData: {},
      chartsrHeight: 400,
      //radio默认选中的值
      r2radioValue: 'rmonth',
      //当前选中的监测点id
      currentJCD: '',
      r1Charts: null,
      r2Charts: null,
      //服务器保存在本地的数据
      r1LocalData: null,
      r2LocalData: null,
      optionr2: {
        baseOption: {
          color: ['#4bb622', '#f88311', '#2772ee'],
          timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: []
          },
          title: {
            subtext: '来自大数据统计',
            left: 10
          },
          tooltip: {},
          legend: {
            left: 10,
            top: 52,
            data: []
          },
          calculable: true,
          grid: {
            top: 120,
            left: 75,
            right: 75,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function(params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: [],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '浓度（毫克/立方米）'
            }
          ],
          series: [
            { name: '烟尘', type: 'bar' },
            { name: 'SO₂', type: 'bar' },
            { name: 'NOx', type: 'bar' },
            {
              name: '排放占比',
              type: 'pie',
              center: ['72%', '16%'],
              radius: '13%',
              z: 100
            }
          ]
        },
        options: []
      },
      //------------added by cjw from 2019/04/15-------------
      leftTableData: [],
      qyList: null,
      currentQY: {
        qyname: '------',
        qypwk: '------',
        ycnd: '------',
        sotwond: '------',
        nond: '------'
      },
      detailsShow: 'hidden',
      searchExpandBtnIcon: 'search', // double-left
      searchSelectShow: false,
      searchText: '',
      searchInput: null,
      columns: [
        {
          title: '排污口名称',
          dataIndex: 'qypwk',
          key: 'qypwk',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) =>
            record.qypwk.toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          }
        },
        {
          title: '企业名称',
          dataIndex: 'qyname',
          key: 'qyname',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) =>
            record.qyname.toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 65,
          align: 'center',
          scopedSlots: {
            customRender: 'actionRender'
          }
        }
      ],
      pagination: {
        size: 'small',
        defaultCurrent: 1,
        defaultPageSize: 5,
        pageSize: 5,
        showTotal: showTotalFn
      },
      timeline: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
    };
  },
  mounted() {
    /**
     * 设置图表高度
     */
    this.chartsrHeight = this.contentHeight - 290;
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });

      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      let markerMap = mapOper.addMarker(markerSetting);
      this.changeMap({ map: markerMap });
      //加载wfs图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=qy_jcd_gk36&OUTPUTFORMAT=json',
        successFunc: response => {
          let that = this;
          //过滤监控点信息
          this.qyList = response.data.features;
          let f_features = _.uniqBy(response.data.features, function(item) {
            return item.geometry.coordinates[0];
          });
          let array = [];
          this.qyList.forEach(e => {
            let temp={
              kid:e.properties.gid,
              jcdbh:e.properties.jcdbh,
              cykmj:e.properties.cykmj,
              ll:e.properties.ll,
              pfbz:e.properties.pfbz,
              pfkgd:e.properties.pfkgd,
              pykzj:e.properties.pykzj,
              qyname:e.properties.qyname,
              qypwk:e.properties.qypwk,
              yccs:e.properties.yccs,
              ycgd:e.properties.ycgd,
              yqwd:e.properties.yqwd,
            };
            array.push(temp);
            
          });
          this.leftTableData = array;
          //console.log(f_features);
          let jsonFeature = {
            type: 'FeatureCollection',
            name: 'qy_jcd_gk36',
            features: f_features
          };
          let style = mapOper.getGeoJsonStyle('qyjcd');
          let wfsParams = {
            map: this.map,
            jsonData: jsonFeature,
            style: style,
            styleFunc: function(feature) {
              style.getText().setText(feature.get('qypwk'));
              return style;
            },
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);
               
                let popset = {
                  map: that.map,
                  //container:container,
                  coordinate: feature.getGeometry().flatCoordinates
                };
                that.popupData = {
                  display: 'block',
                  contentType: 'qy_jcd',
                  Title: feature.get('qypwk'),
                  QyName: feature.get('qyname'),
                  YjLl: feature.get('ll').substring(0, 4),
                  YqWd: feature.get('yqwd').substring(0, 4),
                  PfkGd: feature.get('pfkgd'),
                  YcGd: feature.get('ycgd'),
                  CykMj: feature.get('cykmj'),
                  YcCs: feature.get('yccs'),
                  PykZj: feature.get('pykzj').substring(0, 4),
                  PfBz: feature.get('pfbz')
                };
                mapOper.showPopUp(popset);
                let zoomparams = {
                  map: that.map,
                  center: [feature.getGeometry().flatCoordinates[0] + 1300,feature.getGeometry().flatCoordinates[1] - 500],
                  zoom: 8
                };
                mapOper.ZoomAndCenter(zoomparams);
                // that.currentJCD = feature.get('jcdbh');
                that.monitorPointLocate(feature.get('jcdbh'));
                //that.visablestyle.display='block';
                //更新右侧图表
                that.updateAllCharts();
              } else {
                that.popupData = { display: 'none' };
                that.currentJCD = '';
                //更新右侧图表
                that.updateAllCharts();
                //that.visablestyle.display='none';
              }
            }
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });

          let overlayParams = {
            map: this.map,
            jsonData: response.data
          };
          let overlaymap = mapOper.loadOverlay(overlayParams);
          this.changeMap({ map: overlaymap });
        },
        failFunc: response => {
          console.log(response);
        }
      };
      commonOper.HttpGet(params);
    } else {
      this.$router.push({
        //核心语句
        path: 'R101.html' //跳转的路径
      });
    }
  },
  created() {
    // this.lazyLoad('');
  },
  methods: {
    //更新右侧图表
    updateAllCharts() {
      this.reloadR2Charts(this.r2radioValue);
    },
    //更新图表2
    reloadR2Charts(radiatype) {
      let that = this;
      let chartDiv = document.getElementById('charts-r2');
      that.r2Charts = that.$echarts.init(chartDiv);
      that.r2Charts.showLoading();
      let params = {
        this: that,
        data: [that.currentJCD],
        url: config.webapiUrl + '/qyjcdrecord/getStaticRecordByJcdID',
        successFunc: function(request) {
          let chartData = request.data.data;
          let timelineData = [];
          let lengendData = ['烟尘', 'SO₂', 'NOx'];
          let xAxisData = [];
          _.forEach(chartData, function(item) {
            if (radiatype == 'rmonth') {
              timelineData.push(item.jcyear + '-' + item.jcmoonth);
            } else {
              timelineData.push(item.jcyear);
            }
          });
          let timelineUnique = _.uniq(timelineData);
          that.optionr2.baseOption.timeline.data = timelineUnique;
          that.optionr2.baseOption.legend.data = _.uniq(lengendData);
          that.timeline = timelineUnique;

          that.optionr2.baseOption.xAxis.data =
            chartData.length > 0 ? chartData[0].qypwk : ['---'];
          let dataMap = {};
          let ycData = {};
          let soData = {};
          let noData = {};
          _.forEach(timelineUnique, function(item) {
            ycData[item] = [];
            soData[item] = [];
            noData[item] = [];
            if (radiatype == 'rmonth') {
              let filterParams = {
                jcyear: parseInt(item.split('-')[0]),
                jcmoonth: parseInt(item.split('-')[1])
              };
              let currentObj = _.find(chartData, filterParams);
              ycData[item].push(currentObj.ycnd);
              soData[item].push(currentObj.sotwond);
              noData[item].push(currentObj.nond);
            } else {
              let filterParams = {
                jcyear: parseInt(item)
              };
              let ycYearNd = 0,
                soYearNd = 0,
                noYearNd = 0;
              _.forEach(_.filter(chartData, filterParams), function(it) {
                ycYearNd += it.ycnd;
                soYearNd += it.sotwond;
                noYearNd += it.nond;
              });
              ycData[item].push(ycYearNd);
              soData[item].push(soYearNd);
              noData[item].push(noYearNd);
            }
          });
          dataMap.dataYC = that.dataFormatter(ycData, xAxisData);
          dataMap.dataSO = that.dataFormatter(soData, xAxisData);
          dataMap.dataNO = that.dataFormatter(noData, xAxisData);

          let opts = [];
          _.forEach(timelineUnique, function(item) {
            let op = {
              title: {
                text:
                  ((item + '').length > 4
                    ? (item + '').split('-')[0] +
                      '年' +
                      (item + '').split('-')[1] +
                      '月'
                    : item + '年') + '排放数据',
                subtext: that.currentQY.qypwk + '，来自大数据统计'
              },
              series: [
                { data: dataMap.dataYC[item] },
                { data: dataMap.dataSO[item] },
                { data: dataMap.dataNO[item] },
                {
                  data: [
                    { name: '烟尘', value: dataMap.dataYC[item + 'sum'] },
                    { name: 'SO₂', value: dataMap.dataSO[item + 'sum'] },
                    { name: 'NOx', value: dataMap.dataNO[item + 'sum'] }
                  ]
                }
              ]
            };
            opts.push(op);
          });
          that.optionr2.options = opts;
          that.r2Charts.setOption(that.optionr2);
          //获取数据后，隐藏loading动画
          that.r2Charts.hideLoading();
          window.onresize = that.r2Charts;
        },
        failFunc: function(err) {
          console.log(err);
          this.r2Charts.hideLoading();
        }
      };
      commonOper.HttpPost(params);
    },
    lazyLoad() {
      setTimeout(() => {
        this.updateAllCharts();
      }, 500);
    },
    dataFormatter(obj, list) {
      var pList = list;
      var temp;
      // for (var year = 2002; year <= 2011; year++) {
      for (var j = 0, len = this.timeline.length; j < len; j++) {
        var year = this.timeline[j];
        var max = 0;
        var sum = 0;
        temp = obj[year];
        for (var i = 0, l = temp.length; i < l; i++) {
          max = Math.max(max, temp[i]);
          sum += temp[i];
          obj[year][i] = {
            name: pList[i],
            value: temp[i]
          };
        }
        obj[year + 'max'] = Math.floor(max / 100) * 100;
        obj[year + 'sum'] = sum;
      }
      return obj;
    },
    r2radioChange(e) {
      this.r2radioValue = e.target.value;
      this.reloadR2Charts(this.r2radioValue);
    },
    // ----------added by cjw------------------
    handleSearch(selectedKeys, confirm) {
      confirm();
      this.searchText = selectedKeys[0];
    },
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
    toggleSearchSelect() {
      this.searchSelectShow = !this.searchSelectShow;
      this.searchExpandBtnIcon = this.searchSelectShow
        ? 'double-left'
        : 'search';
    },
    monitorPointLocate(jcdbh) {
      let that = this;
      that.currentJCD = jcdbh;
      let currentObj = _.find(that.qyList, function(o) {
        return o.properties.jcdbh == jcdbh;
      });
      let param = {
        this: that,
        url:
          config.webapiUrl +
          '/qyjcdrecord/getLatestJcdRecordByID?jcdbh=' +
          jcdbh,
        successFunc: function(response) {
          if (response.status === 200 && response.data.data) {
            that.currentQY = {
              qyname: currentObj.properties.qyname,
              qypwk: currentObj.properties.qypwk,
              jcdate: response.data.data.jcdate,
              ycnd: response.data.data.ycnd,
              sotwond: response.data.data.sotwond,
              nond: response.data.data.nond
            };
            that.detailsShow = 'visible';

            let popset = {
              map: that.map,
              coordinate: currentObj.geometry.coordinates
            };
            that.popupData = {
              display: 'block',
              contentType: 'qy_jcd',
              Title: currentObj.properties.qypwk,
              QyName: currentObj.properties.qyname,
              YjLl: currentObj.properties.ll.substring(0, 4),
              YqWd: currentObj.properties.yqwd.substring(0, 4),
              PfkGd: currentObj.properties.pfkgd,
              YcGd: currentObj.properties.ycgd,
              CykMj: currentObj.properties.cykmj,
              YcCs: currentObj.properties.yccs,
              PykZj: currentObj.properties.pykzj.substring(0, 4),
              PfBz: currentObj.properties.pfbz
            };
            mapOper.showPopUp(popset);
            let zoomparams = {
              map: that.map,
              center: [currentObj.geometry.coordinates[0] + 1300,currentObj.geometry.coordinates[1]-500],
              zoom: 8
            };
            mapOper.ZoomAndCenter(zoomparams);
          } else {
            // let params = {
            //   this: that,
            //   title: '提示',
            //   message:
            //     '暂无' +
            //     currentObj.properties.qyname +
            //     currentObj.properties.qypwk +
            //     '最新污染物排放数据！',
            //   type: 'warning'
            // };
            // commonOper.Notification(params);
            that.currentQY = {
              qyname: currentObj.properties.qyname,
              qypwk: currentObj.properties.qypwk,
              ycnd: '---',
              sotwond: '---',
              nond: '---',
              jcdate: '---'
            };
          }
          that.reloadR2Charts(that.r2radioValue);
        },
        failFunc: function(response) {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    ...mapActions(['changeMap'])
  },
  components: {
    PopUp
  }
};
</script>
<style>
@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes warn {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.area-box .dot {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f90;
  opacity: 1;
  filter: alpha(opacity=100);
}
.area-box .pulse {
  position: absolute;
  top: -28px;
  left: -28px;
  height: 66px;
  width: 66px;
  border: 2px solid #f90;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  -moz-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  box-shadow: 0 0 4px #f90, 0 0 10px #f90 inset;
  opacity: 0.12;
  filter: alpha(opacity=0);
  -webkit-animation: warn 2s ease-out both;
  -moz-animation: warn 2s ease-out both;
  -o-animation: warn 2s ease-out both;
  animation: warn 2s ease-out both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: 0 0;
}
.area-box .delay-1 {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
.area-box .delay-2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.area-box .delay-3 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.area-box .delay-4 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.area-box .delay-5 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.area-box .delay-6 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.area-box .delay-7 {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -o-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.area-box .delay-8 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.area-box .delay-9 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.area-box .delay-10 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.area-box .delay-11 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
/* ---------added by cjw from 2019/04/15 ↓--------------- */
#select-left-bar {
  width: 500px;
  position: absolute;
  top: 100px;
  left: 10px;
  background: transparent;
}

.cjw-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  background-color: rgba(0, 60, 136, 0.7);
}

.cjw-control button {
  display: inline-block;
  margin: 1px;
  padding: 0;
  color: white;
  font-size: 1.14em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: 0.4em;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}

.search-select .info-enter-active,
.search-select .info-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1.5);
}

.search-select .info-enter,
.search-select .info-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.custom-filter-dropdown {
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}

.search-select .ant-card-body {
  padding: 0;
}

#charts-r1 .ant-card-grid {
  padding: 10px 24px;
}

.right-slide-enter,
.right-slide-leave-active {
  transform: translateX(540px);
}

.right-slide-leave-active,
.right-slide-enter-active {
  transition: all 0.3s;
}
</style>

